<template>
  <div>
    <header-page></header-page>
    <!-- <router-link :to="{path:'/shoppcar'}"  @click="sendinfo(arr)" > -->

      <div class="yongbox">
        <!-- banner图片 -->
      <div class="hua_banner">
        <img
          src="../../assets/images/yongflowerimg/ysh-top-banner.jpg"
          alt=""
        />
      </div>
      <!-- 分类 -->
      <section class="filter_box">
        <ul class="filter">
          <li>
            <a
              href="#"
              :class="{ active: currindex == 0 }"
              @click="currindex = 0"
              >综合</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="{ active: currindex == 1 }"
              @click="currindex = 1"
              >销量</a
            >
          </li>
          <li class="price">
            <a
              href="#"
              :class="{ active: currindex == 2 }"
              @click="currindex = 2"
              >价格</a
            >
            <span class="top"></span>
            <span class="bottom"></span>
          </li>
          <li>
            <a
              href="#"
              :class="{ active: currindex == 3 }"
              @click="currindex = 3"
              >最新</a
            >
          </li>
        </ul>
        <div class="product_filter_item">
          <span>分类：</span>
          <ul>
            <li>
              <a
                href="#"
                :class="{ active1: currindex1 == 0 }"
                @click="currindex1 = 0"
                >全部</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active1: currindex1 == 1 }"
                @click="currindex1 = 1"
                >经典花盒</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active1: currindex1 == 2 }"
                @click="currindex1 = 2"
                >巨型玫瑰</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active1: currindex1 == 3 }"
                @click="currindex1 = 3"
                >永生瓶花</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active1: currindex1 == 4 }"
                @click="currindex1 = 4"
                >特色永生花</a
              >
            </li>
          </ul>
          
        </div>
          <div class="product_filter_item">
          <span>人群：</span>
          <ul>
            <li>
              <a
                href="#"
                :class="{ active2: currindex2 == 0 }"
                @click="currindex2 = 0"
                >送恋人爱人</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active2: currindex2 == 1 }"
                @click="currindex2 = 1"
                >送父母长辈</a
              >
            </li>
            <li>
              <a
                href="#"
                :class="{ active2: currindex2 == 2 }"
                @click="currindex2 = 2"
                >送朋友同事</a
              >
            </li>
          </ul>
          
        </div>
      </section>
      <!-- 产品部分 -->
      <ul class="product_box">
        <li v-for="(item, index) in arr" :key="index" @click="sendinfo(item)">   
          <a href="#" >
          <img v-lazy="require('../../assets/images/yongflowerimg/'+item.img)" alt="">
           <div class="title"> {{item.title}} </div>
           <span class="dec">{{item.dec}}</span>
           <p>{{item.content}}</p>
           <p class="price"> ¥ {{item.price}} </p>
          </a>

        </li>
      </ul>
    </div>
  <!-- </router-link> -->
    <footer-page></footer-page>
<side>
</side>
  </div>
</template>
<script>
import HeaderPage from "../../components/Header/header.vue"
import footerPage from "../../components/Footer/footer.vue"
import side from "../../components/Side/side.vue"
import { mapState, mapMutations, mapGetters } from "vuex";
import {mapActions} from 'vuex'
export default {
    components:{
     HeaderPage,
     footerPage,
     side
  },
  data() {
    return {
      arr: [],
      obj: this.$store.state.shoppingcai,
      currindex: 3,
      currindex1: "",
      currindex2: 0,
    };
  },
  mounted() {
    this.$axios.get("../../static/data/yongflower.json").then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
  },
   methods: {
   sendinfo(item){
     console.log("dsfdf"+item);
       this.obj.count = this.count;
      this.obj.bol = true
     this.$store.commit("addCart",item);
      this.$store.state.shoppingcai=item

     this.$router.push('/shoppcar');
   },
  },
};
</script>
<style scoped lang='less'>
.yongbox {
  width: 1200px;
  margin: 0 auto;
  margin-top: 10px;
}
li {
  list-style: none;
}
a,p{
    text-decoration: none;
    color: #000;
    font-size: 12px;
}

.filter_box {
  .filter {
    height: 40px;
    line-height: 40px;
  padding: 0 20px;
    border-bottom: 1px solid #000;
    li {
      float: left;
      width: 80px;
      
      .active {
        color: #ff8a00;
      }
    }
    .price {
      position: relative;
      .top {
        position: absolute;
        top: 8px;
        margin-left: 5px;
        display: inline-block;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #000 transparent;
      }
      .bottom {
        position: absolute;
        top: 23px;
        margin-left: 5px;
        display: inline-block;
        border-width: 5px;
        border-style: solid;
        border-color: #000 transparent transparent transparent;
      }
    }
  }
  .product_filter_item {
      position: relative;
    height: 67px;
    line-height: 67px;
    background: #f5f5f5;
    padding: 0px 35px;
    border-bottom: 1px solid #fff;
    span {
      color: #999;
    }
    ul {
       position: absolute;
       padding-left: 50px;
       top: 0;
      li {
        float: left;
        padding: 0 10px;
        .active1{
            color: #ff8a00;
        }
        .active2{
            color:#ff8a00;
        }
      }
    }
  }
}
.product_box{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: space-between;
    margin-top: 30px;
    li{
        width: 285px;
        height: 400px;
        float: left;
        margin-bottom: 60px;
        text-align:center;
        img{
          width: 100%;
          height: 280px;
        }
        .title{
          color: red;
          height: 20px;
          font-weight: bold;
        }
        .dec{
          color: #414e4e;
          font-weight: bold;
        }
        p{
          margin: 10px 0;
        }
        .price{
          font-size: 16px;
        }
    }
    li:hover{
      box-shadow: -5px 2px 10px 3px #ccc;
      transition: all linear .3s;
    }
}
</style>